﻿@media screen {

    body {
        div.vp-grid-container {
            min-height: 700px;
            min-width: 600px;

            h1.vp-grid-title {
                color: #f21e8c;
                text-align: left;
                letter-spacing: -1px;
                font-family: 'SketchFlow Print', 'Helvetica Neue',Verdana,Arial,sans-serif;
                font-size: 1.1em;
            }

            .vp-grid-hidden {
                display: none;
                width: 0px;
                height: 0px;
            }

            table {
                th {
                    .center {
                        text-align: center;
                    }

                    .left {
                        float: left;
                        margin-left: 0.3em;
                    }

                    div.vp-grid-active-header{
                        cursor:pointer;
                        font-size: 1.0em;
                        vertical-align: middle;
                         
                        span{
                            cursor:pointer;
                            font-size: 1.0em;
                            vertical-align: middle;
                        }

                        span.vp-grid-passive-header:after {
                            content: "";
                            display: inline-block;
                            background-position: -48px -80px;
                            background-image: url(images/ui-icons_f21e8c_256x240.png);
                            _float:right;
                            width: 16px;
	                        height: 16px;
                            margin-left : 5px; 
                            vertical-align:middle;
                        }


                    }
                }

                th.ui-th-column {
                    div {
                        font-weight: bold;
                        font-size: 1.1em;
                        padding-top: 3px;
                        text-overflow: ellipsis;
                        white-space:normal;
                        height:auto;
                        max-height:42px;
                        display:inline-block
                    }
                }

                th.vp-grid-filter-toolbar {
                    border: 1px solid #aaaaaa;
                    background: #dedade url(images/ui-bg_highlight-hard_60_dedade_1x100.png) 50% 50% repeat-x;
                    color: #222222;
                    font-weight: bold;
                }

                th.vp-grid-group-header {
                    border: 1px solid #aaaaaa;
                    background: #dedade url(images/ui-bg_highlight-hard_60_dedade_1x100.png) 50% 50% repeat-x;
                    color: #222222;
                    font-weight: bold;
                }

                tr.ui-widget-content.jqgrow {

                    td {
                        input.cbox {
                            cursor:pointer;
                        }
                    }

                    td.vp-grid-cell {
                        padding-left: 5px;
                    }
                    td.vp-grid-not-editable {
                        cursor:default;
                    }
                    td.vp-grid-editable {
                        cursor:pointer;
                    }
                    
                }

                tr.ui-widget-content.jqgrow:hover {
                    td {
                        color: #3f3f3f;
                        _cursor: pointer;
                        background: #F7F3F7 url(images/ui-bg_highlight-hard_60_F7F3F7_1x100.png) repeat-x 60% 60%;
                    }
                }

                textarea {
                    width: 100%;
                    _height: 100%;
                    box-sizing: border-box; /* For IE and modern versions of Chrome */
                    -moz-box-sizing: border-box; /* For Firefox                          */
                    -webkit-box-sizing: border-box; /* For Safari                           */
                }
                 
                td.ui-search-oper {
                    a.soptclass {
                        color : #f21e8c;
                    }
                }

                td.ui-search-clear {
                    a.clearsearchclass {
                        color : #f21e8c;
                    }
                }

            }

            div.ui-jqgrid-view {
                div.vp-grid-status-bar {
                    border: 0px solid #aaaaaa;
                    border-top: 1px solid #aaaaaa;
                    _background: #dedade url(images/ui-bg_highlight-hard_60_dedade_1x100.png) 50% 50% repeat-x;
                    background: #F7F3F7 url(images/ui-bg_highlight-hard_60_F7F3F7_1x100.png) 50% 50% repeat-x;
                    color: #676767;
                    font-weight: bold;
                    height: 20px;
                    vertical-align:middle;
                    div.vp-grid-status-group {
                        float:right;
                        vertical-align:middle;
                        height: 100%;
                        min-height: 20px;
                        text-overflow: ellipsis;
                        margin-top: 3px;
                        margin-right: 5px;

                    }
                }
            }

            div.ui-jqgrid-titlebar {
                span.vp-grid-view-settings-button {
                    cursor:pointer;
                    vertical-align: middle;
                    vertical-align: -webkit-baseline-middle;
                    float:right;
                }

                span.vp-grid-view-settings-button:after {
                            content: "";
                            display: inline-block;
                            background-position: -192px -112px;
                            background-image: url(images/ui-icons_f21e8c_256x240.png);
                            _float:right;
                            width: 16px;
	                        height: 16px;
                            margin-left : 5px; 
                            vertical-align:middle;
                            vertical-align: -webkit-baseline-middle;
                        }

            }



            /* dynamic grid*/
            .vp-row {
                /* apply a natural box layout model to all elements */
                *, *:before, *:after {
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    font-size: 11px;
                }
                    

                vertical-align: middle;
                text-overflow: ellipsis;
                min-width: 500px;

                /* sub grid css rules */
                .vp-row {
                    min-width: 300px;
                }

                div.vp-grid-active-header{
                    cursor:pointer;
                    _font-size: 0.8em;
                    vertical-align: middle;

                    

                    span{
                        cursor:pointer;
                        _font-size: 0.8em;
                        _vertical-align: middle;
                        _vertical-align: -webkit-baseline-middle;
                    }

                    span.vp-grid-passive-header:after {
                            content: "";
                            display: inline-block;
                            background-position: -48px -80px;
                            background-image: url(images/ui-icons_f21e8c_256x240.png);
                            _float:right;
                            width: 16px;
	                        height: 16px;
                            margin-left : 5px; 
                            vertical-align:middle;
                        }
                }

                div.ui-widget-header {
                    font-weight: bold;
                }

                .span12 {
                    width: 100%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span11 {
                    width: 91%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span10 {
                    width: 83%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span9 {
                    width: 75%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span8 {
                    width: 65%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span7 {
                    width: 58%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span6 {
                    width: 50%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span5 {
                    width: 41%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span4 {
                    width: 33.3%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span3 {
                    width: 25%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span2 {
                    width: 16.63%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span1 {
                    width: 8%;
                    float: left;
                    _vertical-align: middle;
                    height: 28px;
                    min-height: 28px;
                    line-height:26px;
                    text-overflow: ellipsis;
                }

                .span12.height-auto {
                    height:auto;
                }
                .span11.height-auto {
                    height:auto;
                }
                .span10.height-auto {
                    height:auto;
                }
                .span9.height-auto {
                    height:auto;
                }
                .span8.height-auto {
                    height:auto;
                }
                .span7.height-auto {
                    height:auto;
                }
                .span6.height-auto {
                    height:auto;
                }
                .span5.height-auto {
                    height:auto;
                }
                .span4.height-auto {
                    height:auto;
                }
                .span3.height-auto {
                    height:auto;
                }
                .span2.height-auto {
                    height:auto;
                }
                .span1.height-auto {
                    height:auto;
                }

                .left-border {
                    border-left-style: solid;
                    border-left-width: thin;
                    border-left-color: #CCCCCC;
                }

                .right-border {
                    border-right-style: solid;
                    border-right-width: thin;
                    border-right-color: #CCCCCC;
                }

                .bottom-border {
                    border-bottom-style: solid;
                    border-bottom-width: thin;
                    border-bottom-color: #CCCCCC;
                }

                .text-left {
                    text-align: left;
                    white-space: nowrap;
                    overflow: hidden;
                    padding-left: 5px;
                }

                .text-right {
                    text-align: right;
                    white-space: nowrap;
                    overflow: hidden;
                    padding-right: 5px;
                }

                .text-center {
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-left: auto;
                    margin-right: auto;
                }

                .text-strong {
                    font-weight: bolder;
                }

                .text-small {
                    font-size: 0.8em;
                }

                input.text {
                    width:90%;
                    min-width:70%;
                    _vertical-align: middle;
                    _vertical-align: -webkit-baseline-middle;
                }

                select {
                    width:90%;
                    min-width:70%;
                    _vertical-align: middle;
                    _vertical-align: -webkit-baseline-middle;
                }

                img {
                    _vertical-align: middle;
                    _vertical-align: -webkit-baseline-middle;
                }

                .float-right {
                    float:right;
                }
            }

            .vp-row:before,
            .vp-row:after {
                display: table;
                line-height: 0;
                content: "";
            }

            .vp-row:after {
                clear: both;
            }

            .vp-row-header {
                height: 28px;
                min-height: 28px;
                line-height:26px;
                background-color: #CCCCCC;
                font-weight: bold;

                span{
                    _vertical-align:middle;
                    _vertical-align: -webkit-baseline-middle;
                    
                }
            }

            .vp-row.vp-modal-dialog-bottom-buttons {
                height: 32px;
                min-height: 32px;

                button {
                    vertical-align:middle;
                    vertical-align: -webkit-baseline-middle;
                }
            }

            .vp-row-bigheader {
                height: 30px;
                background-color: #3399FF;
            }

            hr {
                margin: 10px 0;
                border: 0;
                width: 80%;
                border-top: 1px solid #eeeeee;
                margin-right: auto;
                margin-left: auto;
            }

         
        }
        
        div.vp-grid-container.vp-grid-modal-dialog{
                min-height: 100px;
                min-width: 600px;
            }

        div.ui-dialog{
            div.ui-dialog-titlebar {
                padding: 0.2em 0.2em;
                min-height: 15px;

                span.ui-dialog-title{
                    font-size:13px;
                    text-align:center;
                }
                
                select {
                    background: #F7F3F7;
                    height: 29px;
                    _width: 50%; 
                    max-width:50%
                }

            }

            ul.ui-autocomplete {
            _height : 30%;
            max-height: 118px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            min-width:110px;
            font-size:11px;
          
            }
        }

        
        ul.ui-autocomplete {
            _height : 30%;
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            min-width:100px;
            font-size:11px;
          
            }

    }

}